<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>查询所有类目菜品以及对应的菜品名图片等等..</button><br>
    <hr>
    <input type="text" name="" id="inputDesc">
    <input type="file" name="" id="inputFile">
    <!-- input后面给button btn默认是type:submit 注意！！需要改为 type:button -->
    <button type="button">异步上传图片到服务器</button>  
    <hr> 


    <h3>文件上传From</h3>
    <!-- action 提交的地址 -->
    <form enctype="multipart/form-data" action="http://127.0.0.1:8090/dish/image" method="POST">
        <input type="file" name="dishImg"><br>
        <input type="text" name="description"> 
        <input type="submit">
    </form>

    
    <hr>
    <button id="btn3">新增菜品类别</button><br>
    <button id="btn4">删除10019菜品类别</button><br>
    <button id="btn5">修改10018菜品类别</button><br>


    <!-- 引入axios  -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 查询 -->
    <script>
        document.querySelectorAll('button')[0].onclick=()=>{
            //get方法没有请求主体 可使用/aname/apwd 传参 
            axios.get('http://127.0.0.1:8090/dish').then(res=>{ 
                console.log(res.data)
            }).catch(err=>{
                console.log(err)
            })
        }
    </script> 
     <!-- 异步上传图片到服务器 -->
     <script>
        document.querySelectorAll('button')[1].onclick=()=>{
            //手工创建一个请求主体
            let data=new FormData(); 
            //向请求主体中追加需要提交的数据  这里的inputDesc.value 也可自己写 哪怕叫 头像 什么都可以
            data.append('description',inputDesc.value)
            //向请求主体中追加用户选中的文件 
            console.dir(inputFile)//打印js对象
            //向请求主体中dishImg属性 传入一个文件对象
            data.append('dishImg',inputFile.files[0]) //当前文件对象
            //使用axios将请求主体异步提交给服务器
            axios.post('http://127.0.0.1:8090/dish/image',data).then(res=>{
                console.log(res.data)
            }).catch(err=>{
                console.log(err)
            })
        }
    </script> 


    <!-- 新增菜品 -->
    <script>
        btn3.onclick=()=>{
            //定义传入参数
            let data = {title:'肉类新增',imgUrl:'user.jpg',price:'32',detail:'特别好吃的肉',categoryId:'1'}
            axios.post('http://127.0.0.1:8090/dish',data).then(res=>{
                console.log(res.data)
            })
        }
    </script>

    <!-- 根据did删除菜品 10019-->
    <script>
        btn4.onclick=()=>{
            axios.delete('http://127.0.0.1:8090/dish/10019').then(res=>{
                console.log(res.data)
            })
        }
    </script>

    <!-- 根据did修改10018菜品信息 -->
    <script>
        btn5.onclick=()=>{
            let data={did:'3333',title:'黑木耳',imgUrl:'muer.jpg',price:'22',detail:'难吃的黑木耳',categoryId:'5'}
            axios.put('http://127.0.0.1:8090/dish',data).then(res=>{
                console.log(res.data)
            })
        }
    </script>
    
</body>
</html>